<template>
    <div class="app-trend-history page-container">
        <el-row class="app-trend-history_row header">
            <span class="text">历史趋势</span>
            <i class="el-icon-question"></i>
        </el-row>
        <el-row class="app-trend-history_row app-trend-history_row--filter" type="flex">
            <el-radio
                    class="filter-item"
                    v-for="{label, value} in dateOption"
                    v-model="dateRange"
                    :key="value"
                    :label="value"
                    border>
                {{label}}
            </el-radio>
        </el-row>
        <el-row class="app-trend-history_row user-data_row--key-indicator">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">关键指标</span>
                </el-row>
                <chartKeyIndicator class="card-content chart-item" style="min-height: 340px;" />
            </el-card>
        </el-row>
        <el-row class="app-trend-history_row user-data_row--key-indicator">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">详细数据</span>
                </el-row>
                <div class="card-content">
                    <TableSimple :tableData="tableData" />
                    <el-pagination
                            background
                            :current-page.sync="currentPage"
                            :page-size="100"
                            layout="prev, pager, next, jumper"
                            :total="1000">
                    </el-pagination>
                </div>

            </el-card>
        </el-row>
    </div>
</template>

<script>
import TableSimple from '@/views//modules/user-data/table-simple'
import ChartKeyIndicator from './chart-key-indicator'
export default {
  name: 'AppTrendHistory',
  components: { ChartKeyIndicator, TableSimple },
  data () {
    return {
      dateRange: '1',
      dateOption: [
        {
          label: '当天',
          value: '1'
        },
        {
          label: '7天',
          value: '7'
        },
        {
          label: '14天',
          value: '14'
        },
        {
          label: '30天',
          value: '30'
        }
      ],
      tableData: {
        column: [
          {
            label: '时间',
            prop: 'date'
          },
          {
            label: '浏览量PV',
            prop: 'pv'
          },
          {
            label: '独立用户UV',
            prop: 'uv'
          },
          {
            label: '访问次数VV',
            prop: 'vv'
          },
          {
            label: '独立IP',
            prop: 'ip'
          },
          {
            label: '跳出率',
            prop: 'out'
          },
          {
            label: '平均在线时长',
            prop: 'online'
          }
        ],
        data: [
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          }
        ]
      },
      currentPage: 1
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";

    .page-container {
        .header {
            font-size: 150%;
            .text {
                font-weight: bold;
            }
            .el-icon-question {
                margin-left: $gap-default;
                color: $--color-text-placeholder;
            }
        }

        .app-trend-history_row {
            & ~ .app-trend-history_row {
                margin-top: $gap-big;
            }

            .box-card {
                & + .box-card {
                    margin-top: 0;
                    margin-left: $gap-default;
                }

                .title {
                    font-weight: bolder;
                    font-size: 145%;
                }
            }
        }

        .app-trend-history_row--filter {
            @include filter-row;
        }
    }
</style>
